<template>
  <!-- 自定义导航栏 -->
  <view class="nav-bar" :class="{ dark: isDark }">
    <view class="nav-back" @click="goBack"><</view>
    <view class="nav-title">实时监控</view>
  </view>
  
  <!-- 主容器 -->
  <view class="container" :class="{ dark: isDark }">
    <!-- 顶部状态栏 - 显示连接状态、视频状态和控制模式 -->
    <view class="status-bar">
      <view class="status-item">
        <text class="status-icon">📡</text>
        <text class="status-text">{{ connectionStatus }}</text>
      </view>
      <view class="status-item">
        <text class="status-icon">📹</text>
        <text class="status-text">{{ videoStatus }}</text>
      </view>
      <view class="status-item">
        <text class="status-icon">🤖</text>
        <text class="status-text">机器人控制</text>
      </view>
    </view>

    <!-- 连接设置面板 - 用于连接/断开机器人 -->
    <view class="connection-panel">
      <view class="panel-title">连接设置</view>
      <view class="input-group">
        <!-- 机器人IP输入框 -->
        <input 
          v-model="robotIP" 
          placeholder="输入机器人IP地址" 
          class="ip-input"
          :disabled="isConnected"
        />
        <!-- 连接/断开按钮 -->
        <button 
          @click="toggleConnection" 
          :class="['connect-btn', isConnected ? 'disconnect' : 'connect']"
          :disabled="connecting"
        >
          {{ connecting ? '连接中...' : (isConnected ? '断开' : '连接') }}
        </button>
      </view>
    </view>

    <!-- 摄像头面板 - 显示实时视频流 -->
    <view class="camera-panel">
      <view class="camera-header">
        <text class="camera-title">实时视频流</text>
        <!-- 视频开始/停止按钮 -->
        <button 
          @click="toggleVideo" 
          :class="['video-btn', videoConnected ? 'stop-video' : 'start-video']"
          :disabled="!isConnected || videoConnecting"
        >
          {{ videoConnecting ? '连接中...' : (videoConnected ? '停止视频' : '开始视频') }}
        </button>
      </view>
      <!-- 视频容器 -->
      <view class="camera-container">
        <!-- 视频未连接时的占位符 -->
        <view v-if="!videoConnected" class="camera-placeholder">
          <text class="placeholder-icon">📹</text>
          <text class="placeholder-text">{{ videoPlaceholderText }}</text>
        </view>
        <!-- 视频连接时显示的图像 -->
        <image 
          v-else 
          class="camera" 
          :src="videoPageUrl" 
        />
      </view>
    </view>

    <!-- 舵机控制面板 - 控制摄像头云台方向 -->
    <view class="servo-panel">
      <view class="panel-title">舵机控制</view>
      <view class="servo-controls">
        <!-- 垂直方向控制 -->
        <view class="servo-group">
          <text class="servo-label">垂直 ({{ tilt }}°)</text>
          <view class="servo-buttons">
            <button @touchstart="startServoControl('ONK')" @touchend="stopServoControl" class="servo-btn up">▲</button>
            <button @touchstart="startServoControl('ONJ')" @touchend="stopServoControl" class="servo-btn down">▼</button>
          </view>
        </view>
        <!-- 水平方向控制 -->
        <view class="servo-group">
          <text class="servo-label">水平 ({{ pan }}°)</text>
          <view class="servo-buttons">
            <button @touchstart="startServoControl('ONI')" @touchend="stopServoControl" class="servo-btn left">◀</button>
            <button @touchstart="startServoControl('ONL')" @touchend="stopServoControl" class="servo-btn right">▶</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 方向控制面板 - 控制机器人移动 -->
    <view class="control-panel">
      <view class="panel-title">方向控制</view>
      <view class="direction-controls">
        <!-- 前进按钮 -->
        <button 
          @touchstart="startMove('ONA')" 
          @touchend="stopMove" 
          class="direction-btn forward"
        >
          <text class="btn-icon">⬆️</text>
          <text class="btn-text">前进</text>
        </button>
        
        <!-- 中间行（左转、停止、右转） -->
        <view class="middle-row">
          <!-- 左转按钮 -->
          <button 
            @touchstart="startMove('ONC')" 
            @touchend="stopMove" 
            class="direction-btn left"
          >
            <text class="btn-icon">⬅️</text>
            <text class="btn-text">左转</text>
          </button>
          
          <!-- 紧急停止按钮 -->
          <button 
            @click="emergencyStop" 
            class="stop-btn"
          >
            <text class="stop-icon">🛑</text>
            <text class="stop-text">停止</text>
          </button>
          
          <!-- 右转按钮 -->
          <button 
            @touchstart="startMove('OND')" 
            @touchend="stopMove" 
            class="direction-btn right"
          >
            <text class="btn-icon">➡️</text>
            <text class="btn-text">右转</text>
          </button>
        </view>
        
        <!-- 后退按钮 -->
        <button 
          @touchstart="startMove('ONB')" 
          @touchend="stopMove" 
          class="direction-btn backward"
        >
          <text class="btn-icon">⬇️</text>
          <text class="btn-text">后退</text>
        </button>
      </view>
    </view>

    <!-- 底部信息面板 - 显示系统状态信息 -->
    <view class="info-panel">
      <text class="info-text">{{ statusMessage }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 连接状态相关
      isConnected: false,       // 是否已连接到机器人
      connecting: false,        // 是否正在连接中
      connectionStatus: '未连接', // 连接状态显示文本
      statusMessage: '请输入机器人IP地址并连接', // 底部状态信息
      
      // 网络配置相关
      robotIP: '192.168.0.123', // 机器人IP地址，默认值
      robotPort: 2001,          // 机器人端口号
      socketTask: null,          // WebSocket连接对象
      
      // 舵机角度相关
      pan: 90,                  // 水平方向舵机角度(0-180)
      tilt: 90,                 // 垂直方向舵机角度(0-180)
      
      // 控制状态相关
      moveTimer: null,           // 移动控制定时器
      servoTimer: null,          // 舵机控制定时器
      currentCommand: null,       // 当前执行的命令
      
      // 视频流相关
      videoConnected: false,      // 视频是否已连接
      videoConnecting: false,     // 视频是否正在连接中
      videoStatus: '未连接',      // 视频状态显示文本
      videoPageUrl: '',           // 视频流URL
      videoPlaceholderText: '连接机器人后可开始视频', // 视频占位文本
      
      // 重连机制相关
      reconnectTimer: null,       // 重连定时器
      reconnectAttempts: 0,       // 当前重连尝试次数
      maxReconnectAttempts: 5,    // 最大重连尝试次数
      
      // 心跳检测相关
      heartbeatTimer: null,       // 心跳定时器
      lastHeartbeat: null,        // 最后一次收到心跳的时间
      
      // 主题模式
      isDark: false               // 是否启用暗黑模式
    }
  },
  
  // 页面挂载时执行
  mounted() {
    this.statusMessage = '请输入正确的机器人IP地址并点击连接';
  },
  
  // 页面显示时执行
  onShow() {
    // 获取全局主题设置并应用
    const dark = getApp().globalData.darkMode;
    this.isDark = dark;
  
    // 根据主题设置界面样式
    if (dark) {
      // 暗黑模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#1e1e1e',
        borderStyle: 'black',
        color: '#999999',
        selectedColor: '#ffffff'
      });
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1e1e1e'
      });
    } else {
      // 明亮模式下的样式设置
      uni.setTabBarStyle({
        backgroundColor: '#ffffff',
        borderStyle: 'black',
        color: '#7A7E83',
        selectedColor: '#fb7e29'
      });
      uni.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#F8F8F8'
      });
    }
  },
  
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      uni.switchTab({
        url: '/pages/telecontrol/telecontrol'
      })
    },
    
    /**
     * 切换连接状态（连接/断开）
     */
    toggleConnection() {
      if (this.isConnected) {
        this.disconnect();
      } else {
        this.connect();
      }
    },
    
    /**
     * 连接到机器人
     */
    connect() {
      // 验证IP地址是否有效
      if (!this.robotIP.trim()) {
        this.showToast('请输入有效的IP地址');
        return;
      }
      
      // 设置连接状态
      this.connecting = true;
      this.connectionStatus = '连接中';
      this.statusMessage = '正在连接机器人...';
      
      // 构建WebSocket URL
      const wsUrl = `ws://${this.robotIP}:${this.robotPort}`;
      console.log('正在连接到:', wsUrl);
      
      // 创建WebSocket连接
      this.socketTask = uni.connectSocket({
        url: wsUrl,
        complete: () => {
          console.log('WebSocket连接请求已发送');
        }
      });
      
      // WebSocket连接成功回调
      this.socketTask.onOpen(() => {
        console.log('WebSocket连接成功');
        this.isConnected = true;
        this.connecting = false;
        this.connectionStatus = '已连接';
        this.statusMessage = '机器人连接成功，可以开始控制和观看视频';
        this.showToast('连接成功');
        this.reconnectAttempts = 0;
        this.videoPlaceholderText = '点击"开始视频"观看实时画面';
        
        // 启动心跳检测
        this.startHeartbeat();
      });
      
      // WebSocket连接错误回调
      this.socketTask.onError((error) => {
        console.log('WebSocket连接错误:', error);
        this.connecting = false;
        this.connectionStatus = '连接失败';
        this.statusMessage = '连接失败，请检查IP地址和网络';
        this.showToast('连接失败，请检查网络');
        
        // 尝试重连
        this.attemptReconnect();
      });
      
      // WebSocket连接关闭回调
      this.socketTask.onClose((res) => {
        console.log('WebSocket连接关闭:', res);
        if (this.isConnected) {
          this.showToast('连接已断开');
          this.attemptReconnect();
        }
        this.resetConnection();
      });
      
      // WebSocket收到消息回调
      this.socketTask.onMessage((res) => {
        console.log('收到消息:', res.data);
        try {
          const data = JSON.parse(res.data);
          this.handleServerMessage(data);
        } catch (e) {
          console.log('消息解析失败:', e);
        }
      });
      
      // 连接超时处理
      setTimeout(() => {
        if (this.connecting) {
          this.connecting = false;
          this.connectionStatus = '连接超时';
          this.statusMessage = '连接超时，请检查机器人是否在线';
          this.showToast('连接超时');
        }
      }, 10000);
    },
    
    /**
     * 切换视频连接状态（开始/停止）
     */
    toggleVideo() {
      if (this.videoConnected) {
        this.stopVideo();
      } else {
        this.startVideo();
      }
    },
    
    /**
     * 开始视频流
     */
    startVideo() {
      // 检查是否已连接机器人
      if (!this.isConnected) {
        this.showToast('请先连接机器人');
        return;
      }
      
      // 设置视频连接状态
      this.videoConnecting = true;
      this.videoStatus = '连接中';
      this.statusMessage = '正在启动视频流...';
      
      // 构建视频流URL（这里简化处理，实际项目中可能需要更复杂的WebRTC实现）
      this.videoPageUrl = `http://${this.robotIP}:8000/video`;
      
      // 模拟视频连接过程（实际项目中应该等待真实连接成功）
      setTimeout(() => {
        this.videoConnected = true;
        this.videoConnecting = false;
        this.videoStatus = '已连接';
        this.statusMessage = 'WebRTC视频流已启动';
        this.showToast('视频连接成功');
      }, 2000);
    },
    
    /**
     * 停止视频流
     */
    stopVideo() {
      this.videoConnected = false;
      this.videoConnecting = false;
      this.videoStatus = '未连接';
      this.videoPageUrl = '';
      this.statusMessage = '视频流已停止';
      this.showToast('视频已停止');
    },
    
    /**
     * 处理服务器消息
     * @param {Object} data - 服务器发送的消息数据
     */
handleServerMessage(data) {
  console.log('收到服务器消息:', data);
  
  switch (data.type) {
    case 'connection':  // 连接消息
      if (data.current_pan !== undefined) {
        this.pan = data.current_pan;
      }
      if (data.current_tilt !== undefined) {
        this.tilt = data.current_tilt;
      }
      break;
      
    case 'command_response':  // 命令响应
      if (data.success) {
        // 更新舵机角度显示
        if (data.pan !== undefined) {
          this.pan = data.pan;
        }
        if (data.tilt !== undefined) {
          this.tilt = data.tilt;
        }
        // 更新状态消息
        if (data.message) {
          this.statusMessage = data.message;
        }
      } else {
        // 命令执行失败
        this.showToast('命令执行失败: ' + (data.error || '未知错误'));
        this.statusMessage = '命令执行失败';
      }
      break;
      
    case 'status_response':  // 状态响应
    case 'status_update':    // 状态更新
      if (data.pan !== undefined) {
        this.pan = data.pan;
      }
      if (data.tilt !== undefined) {
        this.tilt = data.tilt;
      }
      break;
      
    case 'heartbeat':  // 心跳消息
      this.lastHeartbeat = Date.now();
      if (data.pan !== undefined) {
        this.pan = data.pan;
      }
      if (data.tilt !== undefined) {
        this.tilt = data.tilt;
      }
      break;
      
    case 'error':      // 错误消息
      console.error('服务器错误:', data.message);
      this.showToast('服务器错误: ' + data.message);
      break;
      
    default:
      console.log('未知消息类型:', data.type);
  }
},
    
    /**
     * 启动心跳检测
     */
    startHeartbeat() {
      this.lastHeartbeat = Date.now();
      this.heartbeatTimer = setInterval(() => {
        // 检查是否超过60秒没有收到心跳
        if (this.lastHeartbeat && Date.now() - this.lastHeartbeat > 60000) {
          console.log('心跳超时，尝试重连');
          this.attemptReconnect();
        }
      }, 30000);  // 每30秒检查一次
    },
    
    /**
     * 停止心跳检测
     */
    stopHeartbeat() {
      if (this.heartbeatTimer) {
        clearInterval(this.heartbeatTimer);
        this.heartbeatTimer = null;
      }
    },
    
    /**
     * 尝试重新连接
     */
    attemptReconnect() {
      // 检查是否超过最大重连次数
      if (this.reconnectAttempts >= this.maxReconnectAttempts) {
        this.statusMessage = '重连失败，请手动重新连接';
        return;
      }
      
      // 更新重连状态
      this.reconnectAttempts++;
      this.statusMessage = `正在尝试重连 (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`;
      
      // 设置重连定时器
      this.reconnectTimer = setTimeout(() => {
        if (!this.isConnected) {
          this.connect();
        }
      }, 3000);
    },
    
	requestStatus() {
	  if (this.isConnected && this.socketTask) {
	    const statusRequest = {
	      type: 'status_request',
	      timestamp: Date.now()
	    };
	    
	    this.socketTask.send({
	      data: JSON.stringify(statusRequest),
	      success: () => {
	        console.log('状态请求发送成功');
	      },
	      fail: (error) => {
	        console.log('状态请求发送失败:', error);
	      }
	    });
	  }
	},
    /**
     * 断开连接
     */
    disconnect() {
      // 清除所有定时器
      this.clearAllTimers();
      this.stopHeartbeat();
      this.stopVideo(); // 同时停止视频
      
      // 关闭WebSocket连接
      if (this.socketTask) {
        this.socketTask.close({
          code: 1000,
          reason: '用户主动断开'
        });
      }
      
      // 重置连接状态
      this.resetConnection();
      this.showToast('已断开连接');
    },
    
    /**
     * 重置连接状态
     */
    resetConnection() {
      this.isConnected = false;
      this.connecting = false;
      this.connectionStatus = '未连接';
      this.statusMessage = '连接已断开';
      this.socketTask = null;
      this.clearAllTimers();
      this.stopHeartbeat();
      this.stopVideo();
      this.videoPlaceholderText = '连接机器人后可开始视频';
    },
    
    /**
     * 发送控制命令到机器人
     * @param {string} command - 要发送的命令
     * @returns {boolean} 是否发送成功
     */
sendCommand(command) {
  // 检查连接状态
  if (!this.isConnected || !this.socketTask) {
    this.showToast('请先连接机器人');
    return false;
  }
  
  try {
    // 构建命令对象
    const commandData = {
      type: 'command',
      command: command,
      timestamp: Date.now()
    };
    
    // 发送命令
    this.socketTask.send({
      data: JSON.stringify(commandData),
      success: () => {
        console.log('命令发送成功:', command);
      },
      fail: (error) => {
        console.log('命令发送失败:', error);
        this.showToast('命令发送失败');
      }
    });
    return true;
  } catch (error) {
    console.log('发送命令异常:', error);
    return false;
  }
},
    
    /**
     * 开始移动机器人
     * @param {string} command - 移动命令
     */
    startMove(command) {
      // 检查连接状态
      if (!this.isConnected) {
        this.showToast('请先连接机器人');
        return;
      }
      
      // 设置当前命令和状态
      this.currentCommand = command;
      this.sendCommand(command);
      this.statusMessage = this.getCommandDescription(command);
      
      // 设置定时器持续发送命令（每150ms发送一次）
      this.moveTimer = setInterval(() => {
        if (this.currentCommand === command) {
          this.sendCommand(command);
        }
      }, 150);
    },
    
    /**
     * 停止移动机器人
     */
    stopMove() {
      this.clearMoveTimer();
      this.currentCommand = null;
      this.sendCommand('ONF'); // 发送停止命令
      this.statusMessage = '停止移动';
    },
    
    /**
     * 紧急停止机器人
     */
    emergencyStop() {
      this.clearAllTimers();
      this.currentCommand = null;
      this.sendCommand('ONF');
      this.statusMessage = '紧急停止';
      this.showToast('紧急停止');
    },
    
    /**
     * 开始控制舵机
     * @param {string} command - 舵机控制命令
     */
    startServoControl(command) {
      // 检查连接状态
      if (!this.isConnected) {
        this.showToast('请先连接机器人');
        return;
      }
      
      // 发送初始命令
      this.sendCommand(command);
      this.updateServoAngles(command);
      this.statusMessage = this.getCommandDescription(command);
      
      // 设置定时器持续发送命令（每200ms发送一次）
      this.servoTimer = setInterval(() => {
        this.sendCommand(command);
        this.updateServoAngles(command);
      }, 200);
    },
    
    /**
     * 停止控制舵机
     */
    stopServoControl() {
      this.clearServoTimer();
      this.statusMessage = '舵机控制停止';
    },
    
    /**
     * 更新舵机角度显示
     * @param {string} command - 舵机控制命令
     */
    updateServoAngles(command) {
      switch(command) {
        case 'ONJ': // 向下
          this.tilt = Math.max(0, this.tilt - 10);
          break;
        case 'ONK': // 向上
          this.tilt = Math.min(180, this.tilt + 10);
          break;
        case 'ONI': // 向左
          this.pan = Math.max(0, this.pan - 10);
          break;
        case 'ONL': // 向右
          this.pan = Math.min(180, this.pan + 10);
          break;
      }
    },
    
    /**
     * 清除移动定时器
     */
    clearMoveTimer() {
      if (this.moveTimer) {
        clearInterval(this.moveTimer);
        this.moveTimer = null;
      }
    },
    
    /**
     * 清除舵机定时器
     */
    clearServoTimer() {
      if (this.servoTimer) {
        clearInterval(this.servoTimer);
        this.servoTimer = null;
      }
    },
    
    /**
     * 清除所有定时器
     */
    clearAllTimers() {
      this.clearMoveTimer();
      this.clearServoTimer();
      
      if (this.reconnectTimer) {
        clearTimeout(this.reconnectTimer);
        this.reconnectTimer = null;
      }
    },
    
    /**
     * 获取命令描述文本
     * @param {string} command - 控制命令
     * @returns {string} 命令描述文本
     */
    getCommandDescription(command) {
      const descriptions = {
        'ONA': '正在前进',
        'ONB': '正在后退',
        'ONC': '正在左转',
        'OND': '正在右转',
        'ONF': '停止',
        'ONJ': '舵机向下',
        'ONK': '舵机向上',
        'ONI': '舵机向左',
        'ONL': '舵机向右'
      };
      return descriptions[command] || '执行命令';
    },
    
    /**
     * 显示提示消息
     * @param {string} message - 要显示的消息
     */
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      });
    }
  },
  
  // 页面隐藏时停止所有控制
  onHide() {
    this.clearAllTimers();
    this.sendCommand('ONF'); // 停止所有动作
  },
  
  // 页面卸载时断开连接
  onUnload() {
    this.disconnect();
  }
}
</script>

<style scoped>
/* 导入公共样式 */
@import "@/common/page-style.scss";

/* 主容器样式 */
.container {
  padding: 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 暗黑模式样式 */
.dark {
  background: linear-gradient(135deg, #1c1c1c 0%, #2a2a2a 100%) !important;
}

.dark .status-bar,
.dark .connection-panel,
.dark .camera-panel,
.dark .servo-panel,
.dark .control-panel,
.dark .info-panel {
  background: rgba(40, 40, 40, 0.95) !important;
  color: #ddd;
}

.dark .panel-title,
.dark .status-text,
.dark .info-text,
.dark .camera-title,
.dark .servo-label {
  color: #ddd !important;
}

.dark .ip-input {
  background: #2a2a2a;
  color: #fff;
  border-color: #555;
}

.dark .ip-input:focus {
  border-color: #888;
}

.dark .nav-back {
  color: #fff;
}

.dark .nav-title {
  color: #fff;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.95);
  padding: 20rpx 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  margin-top: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
}

.status-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.status-icon {
  font-size: 28rpx;
}

.status-text {
  font-size: 24rpx;
  font-weight: 600;
  color: #333;
}

/* 连接面板样式 */
.connection-panel {
  background: rgba(255, 255, 255, 0.95);
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
}

.panel-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  text-align: center;
}

.input-group {
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.ip-input {
  flex: 1;
  padding: 20rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 15rpx;
  font-size: 28rpx;
  background: #fff;
  transition: border-color 0.3s ease;
}

.ip-input:focus {
  border-color: #2196F3;
}

.connect-btn {
  padding: 20rpx 40rpx;
  border-radius: 15rpx;
  font-size: 28rpx;
  font-weight: bold;
  border: none;
  color: white;
  min-width: 120rpx;
  transition: all 0.3s ease;
}

.connect-btn.connect {
  background: linear-gradient(45deg, #4CAF50, #45a049);
}

.connect-btn.disconnect {
  background: linear-gradient(45deg, #f44336, #da190b);
}

.connect-btn:active {
  transform: scale(0.95);
}

/* 摄像头面板样式 */
.camera-panel {
  background: rgba(255, 255, 255, 0.95);
  padding: 20rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
}

.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
  padding: 0 10rpx;
}

.camera-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.video-btn {
  padding: 15rpx 30rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  font-weight: bold;
  border: none;
  color: white;
  transition: all 0.3s ease;
}

.video-btn.start-video {
  background: linear-gradient(45deg, #FF5722, #E64A19);
}

.video-btn.stop-video {
  background: linear-gradient(45deg, #757575, #424242);
}

.video-btn:disabled {
  opacity: 0.6;
  background: #ccc !important;
}

.camera-container {
  height: 400rpx;
  border-radius: 15rpx;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.camera-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
}

.placeholder-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.placeholder-text {
  font-size: 28rpx;
  text-align: center;
  color: #999;
}

/* 舵机控制面板样式 */
.servo-panel {
  background: rgba(255, 255, 255, 0.95);
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
}

.servo-controls {
  display: flex;
  justify-content: space-around;
  gap: 30rpx;
}

.servo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
}

.servo-label {
  font-size: 26rpx;
  font-weight: 600;
  color: #666;
}

.servo-buttons {
  display: flex;
  gap: 10rpx;
}

.servo-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  border: none;
  font-size: 32rpx;
  font-weight: bold;
  color: white;
  background: linear-gradient(45deg, #FF9800, #F57C00);
  box-shadow: 0 4rpx 15rpx rgba(255, 152, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.servo-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 10rpx rgba(255, 152, 0, 0.5);
}

/* 方向控制面板样式 */
.control-panel {
  background: rgba(255, 255, 255, 0.95);
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
}

.direction-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.direction-btn {
  width: 160rpx;
  height: 160rpx;
  border-radius: 25rpx;
  border: none;
  background: linear-gradient(45deg, #2196F3, #1976D2);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  box-shadow: 0 6rpx 20rpx rgba(33, 150, 243, 0.3);
  font-weight: bold;
  transition: all 0.2s ease;
}

.direction-btn:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 15rpx rgba(33, 150, 243, 0.5);
}

.btn-icon {
  font-size: 40rpx;
}

.btn-text {
  font-size: 24rpx;
}

.middle-row {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.stop-btn {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: none;
  background: linear-gradient(45deg, #f44336, #d32f2f);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5rpx;
  box-shadow: 0 6rpx 20rpx rgba(244, 67, 54, 0.4);
  font-weight: bold;
  transition: all 0.2s ease;
}

.stop-btn:active {
  transform: scale(0.95);
}

.stop-icon {
  font-size: 32rpx;
}

.stop-text {
  font-size: 20rpx;
}

/* 信息面板样式 */
.info-panel {
  background: rgba(255, 255, 255, 0.9);
  padding: 25rpx;
  border-radius: 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
}

.info-text {
  font-size: 26rpx;
  color: #666;
  font-weight: 500;
}

/* 禁用状态样式 */
.connect-btn:disabled {
  opacity: 0.6;
  background: #ccc !important;
  cursor: not-allowed;
}

/* 响应式设计 - 小屏幕适配 */
@media screen and (max-width: 750rpx) {
  .servo-controls {
    flex-direction: column;
    gap: 20rpx;
  }
  
  .middle-row {
    gap: 20rpx;
  }
  
  .direction-btn {
    width: 140rpx;
    height: 140rpx;
  }
}
</style>